<template>
    <el-form-item v-if="shouldShow" :prop="item.prop" :label="item.label" :required="item.required" :rules="item.rules">
        <!-- 输入框 -->
        <el-input v-if="item.type === 'input'" v-model="formData[item.prop!]" :placeholder="item.placeholder"
            :disabled="isDisabled" :readonly="item.readonly" :maxlength="item.props?.maxlength"
            :show-word-limit="item.props?.showWordLimit" :clearable="item.props?.clearable !== false"
            :prefix-icon="item.props?.prefixIcon" :suffix-icon="item.props?.suffixIcon" v-bind="item.props" />

        <!-- 文本域 -->
        <el-input v-else-if="item.type === 'textarea'" v-model="formData[item.prop!]" type="textarea"
            :placeholder="item.placeholder" :disabled="isDisabled" :readonly="item.readonly"
            :rows="item.props?.rows || 3" :maxlength="item.props?.maxlength"
            :show-word-limit="item.props?.showWordLimit" :resize="item.props?.resize" v-bind="item.props" />

        <!-- 数字输入框 -->
        <el-input-number v-else-if="item.type === 'number'" v-model="formData[item.prop!]"
            :placeholder="item.placeholder" :disabled="isDisabled" :min="item.props?.min" :max="item.props?.max"
            :step="item.props?.step || 1" :precision="item.props?.precision" :controls="item.props?.controls !== false"
            :controls-position="item.props?.controlsPosition" v-bind="item.props" />

        <!-- 选择器 -->
        <el-select v-else-if="item.type === 'select'" v-model="formData[item.prop!]" :placeholder="item.placeholder"
            :disabled="isDisabled" :multiple="item.props?.multiple" :clearable="item.props?.clearable !== false"
            :filterable="item.props?.filterable" :remote="item.props?.remote" :remote-method="item.props?.remoteMethod"
            :loading="item.props?.loading" v-bind="item.props">
            <el-option 
                v-for="option in item.options" 
                :key="option.value" 
                :label="option.label" 
                :value="option.value"
                :disabled="option.disabled"
                v-if="option && option.value !== undefined && option.value !== null && option.label"
            />
        </el-select>

        <!-- 单选框组 -->
        <el-radio-group v-else-if="item.type === 'radio'" v-model="formData[item.prop!]" :disabled="isDisabled"
            :size="item.props?.size" v-bind="item.props">
            <el-radio v-for="option in item.options" :key="option.value" :value="option.value"
                :disabled="option.disabled">
                {{ option.label }}
            </el-radio>
        </el-radio-group>

        <!-- 复选框组 -->
        <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="formData[item.prop!]" :disabled="isDisabled"
            :min="item.props?.min" :max="item.props?.max" :size="item.props?.size" v-bind="item.props">
            <el-checkbox v-for="option in item.options" :key="option.value" :value="option.value"
                :disabled="option.disabled">
                {{ option.label }}
            </el-checkbox>
        </el-checkbox-group>

        <!-- 开关 -->
        <el-switch v-else-if="item.type === 'switch'" v-model="formData[item.prop!]" :disabled="isDisabled"
            :active-text="item.props?.activeText" :inactive-text="item.props?.inactiveText"
            :active-value="item.props?.activeValue ?? true" :inactive-value="item.props?.inactiveValue ?? false"
            v-bind="item.props" />

        <!-- 日期选择器 -->
        <el-date-picker v-else-if="item.type === 'date'" v-model="formData[item.prop!]" type="date"
            :placeholder="item.placeholder" :disabled="isDisabled" :clearable="item.props?.clearable !== false"
            :format="item.props?.format || 'YYYY-MM-DD'" :value-format="item.props?.valueFormat || 'YYYY-MM-DD'"
            v-bind="item.props" />

        <!-- 日期时间选择器 -->
        <el-date-picker v-else-if="item.type === 'datetime'" v-model="formData[item.prop!]" type="datetime"
            :placeholder="item.placeholder" :disabled="isDisabled" :clearable="item.props?.clearable !== false"
            :format="item.props?.format || 'YYYY-MM-DD HH:mm:ss'"
            :value-format="item.props?.valueFormat || 'YYYY-MM-DD HH:mm:ss'" v-bind="item.props" />

        <!-- 时间选择器 -->
        <el-time-picker v-else-if="item.type === 'time'" v-model="formData[item.prop!]" :placeholder="item.placeholder"
            :disabled="isDisabled" :clearable="item.props?.clearable !== false"
            :format="item.props?.format || 'HH:mm:ss'" :value-format="item.props?.valueFormat || 'HH:mm:ss'"
            v-bind="item.props" />

        <!-- 级联选择器 -->
        <el-cascader v-else-if="item.type === 'cascader'" v-model="formData[item.prop!]" :options="item.options"
            :placeholder="item.placeholder" :disabled="isDisabled" :clearable="item.props?.clearable !== false"
            :show-all-levels="item.props?.showAllLevels !== false" :collapse-tags="item.props?.collapseTags"
            :separator="item.props?.separator || '/'" v-bind="item.props" />

        <!-- 颜色选择器 -->
        <el-color-picker v-else-if="item.type === 'color'" v-model="formData[item.prop!]" :disabled="isDisabled"
            :show-alpha="item.props?.showAlpha" :color-format="item.props?.colorFormat" v-bind="item.props" />

        <!-- 评分 -->
        <el-rate v-else-if="item.type === 'rate'" v-model="formData[item.prop!]" :disabled="isDisabled"
            :max="item.props?.max || 5" :allow-half="item.props?.allowHalf"
            :low-threshold="item.props?.lowThreshold || 2" :high-threshold="item.props?.highThreshold || 4"
            v-bind="item.props" />

        <!-- 滑块 -->
        <el-slider v-else-if="item.type === 'slider'" v-model="formData[item.prop!]" :disabled="isDisabled"
            :min="item.props?.min || 0" :max="item.props?.max || 100" :step="item.props?.step || 1"
            :show-input="item.props?.showInput" :show-input-controls="item.props?.showInputControls !== false"
            :range="item.props?.range" v-bind="item.props" />

        <!-- 穿梭框 -->
        <el-transfer v-else-if="item.type === 'transfer'" v-model="formData[item.prop!]" :data="item.options"
            :disabled="isDisabled" :titles="item.props?.titles || ['列表1', '列表2']" :filterable="item.props?.filterable"
            :filter-placeholder="item.props?.filterPlaceholder" v-bind="item.props" />

        <!-- 自定义插槽 -->
        <slot v-else-if="item.slot" :name="item.slot" :item="item" :form-data="formData" />

        <!-- 默认文本显示 -->
        <span v-else>{{ formData[item.prop!] }}</span>
    </el-form-item>
</template>

<script setup lang="ts">
/**
 * 表单项组件
 * @author Wu.Liang
 * @description 用于动态渲染各种表单控件
 */
import { computed } from 'vue'
import type { FormItemConfig } from './DynamicForm.vue'

interface Props {
    item: FormItemConfig
    formData: Record<string, any>
}

const props = defineProps<Props>()

// 计算是否显示
const shouldShow = computed(() => {
    if (props.item.show) {
        return props.item.show(props.formData)
    }
    return true
})

// 计算是否禁用
const isDisabled = computed(() => {
    if (props.item.disabled) return true
    if (props.item.disabledCondition) {
        return props.item.disabledCondition(props.formData)
    }
    return false
})
</script>

<style lang="scss" scoped>
// 组件样式</style>
